<template>
    <div class="editCenter" :class="editorClass" id="leftArea">
        <div class="edit-panel posr" :class="{laptop: !rightBarVisible}">
            <!-- 下载列表 begin -->
            <div class="downPop" v-show="showProgBox">
                <ul class="downList" >
                    <li v-for="item, index in objTencentUp" v-show="item.curr != 1">
                        <p class="mname" :title="item.videoName">{{item.videoName}}</p>
                        <em class="dinfo">{{item.videoSizeStr}}</em>
                        <span class="skillbar">
                            <ins class="filled" :style="{'width': item.percentage}"></ins>
                        </span>
                        <em class="dinfo">{{item.curr === 0 ? '计算中' : item.percentage}}</em>
                    </li>
                </ul>
            </div>
            <!-- 下载列表 end -->
            <div id="editArea" class="edit-con" @scroll="scroll">
                <!-- 角标 -->
                <div class="cornerL"></div>
                <div class="cornerR"></div>
                <!--<h1 v-text="title"></h1>-->
                <div class="edit-txt">
                    <div id="editor" style="height: 1110px;"></div>
                </div>
                <!--<material-list v-for="(item, index) in materialList" :item="item" :index="index" :key="item.offsetTop"></material-list>-->
                <quote-list></quote-list>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapState, mapGetters, mapActions} from 'vuex'
    import QuoteList from './QuoteList'
    export default {
        mounted() {
            this.init(); // 初始化编辑器
        },
        computed: {
            ...mapState(['rightBarVisible', 'title', 'objTencentUp']),
            editorClass() {
                let arr = [];
                if(this.rightBarVisible){
                    // arr = ["r0", "r0only"];
                }
                return arr;
            },
            // 是否展示腾讯云上传的进度条
            showProgBox() {
                let obj = this.objTencentUp;
                // 空对象 隐藏
                if($.isEmptyObject(obj)){
                    return false;
                }
                // 非空对象，有的没有上传完 显示
                // 非空对象，全上传完了 隐藏
                let notAllDone = false;
                for (let objKey in obj) {
                    if(obj[objKey].curr !== 1){
                        notAllDone = true;
                        break;
                    }
                }
                return notAllDone === true;
            }
        },
        methods: {
            ...mapActions(['init', 'scroll'])
        },
        components: {
            QuoteList,
        }
    }
</script>
